<template>
  <!-- 组件列表页面 -->
  <view class="component-page">
    <!-- 1. 容器组件 -->
    <view class="component-group">
      <view class="group-title">1.容器</view>
      <view class="component-item">view视图</view>
    </view>

    <!-- 2. 基础内容组件 -->
    <view class="component-group">
      <view class="group-title">2.基础内容</view>
      <view class="component-item">text文本编辑</view>
      <view class="component-item">icon图标</view>
    </view>

    <!-- 3. 表单组件 -->
    <view class="component-group">
      <view class="group-title">3.表单组件</view>
      <view class="component-item">button按钮</view>
      <view class="component-item">checkbox多选框</view>
      <view class="component-item">label标签组件</view>
      <view class="component-item">input输入框</view>
      <view class="component-item">textarea多行文本输入框</view>
      <view class="component-item">form表单</view>
    </view>

    <!-- 4. 导航组件 -->
    <view class="component-group">
      <view class="group-title">4.导航组件</view>
      <view class="component-item">navigator</view>
    </view>

    <!-- 底部工具栏 -->
    <view class="tab-bar">
      <button class="tab-btn">卡片</button>
      <button class="tab-btn">语法</button>
      <button class="tab-btn">API</button>
      <button class="tab-btn">案例</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
/* 页面样式，还原图二效果 */
.component-page {
  padding: 10px;
  font-family: sans-serif;
}
.component-group {
  margin: 10px 0;
  border-radius: 4px;
  overflow: hidden;
}
.group-title {
  background-color: #d4f4d4;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: bold;
}
.component-item {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
.component-item:last-child {
  border-bottom: none;
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-top: 1px solid #eee;
  margin-top: 20px;
}
.tab-btn {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
</style>